<template>
  <div class="wrapper" v-if="user">
    <el-card class="box-card info-wrap">
      <el-row :gutter="24">
        <el-col :span="4">
          <div>
            <el-avatar
              shape="square"
              :size="100"
              :src="user.profile_photo || defaultAvatar"
            ></el-avatar>
            <el-upload
              style="margin-left: 15px; margin-top: 10px"
              action
              :multiple="false"
              :auto-upload="false"
              :before-remove="beforeRemove"
              :show-file-list="false"
              :on-change="handleChange"
            >
              <el-button
                data-tracker="P65-1"
                slot="trigger"
                size="mini"
                type="primary"
                >修改头像</el-button
              >
            </el-upload>
          </div>
        </el-col>

        <el-col :span="16">
          <el-descriptions
            size="medium"
            style="padding-top: 20px"
            :column="2"
            title=""
            :labelStyle="{ width: '60px' }"
          >
            <el-descriptions-item label="用户名">{{
              user.nickname
            }}</el-descriptions-item>
            <el-descriptions-item label="账号类型">{{
              typesData[this.accountType] || "员工"
            }}</el-descriptions-item>
            <!-- <el-descriptions-item label="收入金额" v-permission="''"
              >1111111</el-descriptions-item
            > -->
            <el-descriptions-item label="账号">{{
              user.username
            }}</el-descriptions-item>
            <el-descriptions-item label="注册时间">
              <span v-time="user.create_time"></span>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="待提现" v-permission="''"
              >2222222</el-descriptions-item
            > -->
            <el-descriptions-item label="手机号" :span="2">{{
              user.mobile
            }}</el-descriptions-item>
            <!-- <el-descriptions-item label="已提现" v-permission="''"
              >444444</el-descriptions-item
            > -->
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card manage-wrap">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="0">
          <el-row :gutter="24">
            <el-col :span="12">
              <div class="account">
                <template v-if="accountType === '0'">
                  <PersonCustomer
                    :mode="mode"
                    :id="user.type_id"
                    :user="user"
                    @modeChange="handleModeChane"
                    @ok="handleCustomerOk"
                    @cancel="handleClose"
                  ></PersonCustomer>
                </template>
                <template v-else-if="accountType === '1'">
                  <CompanyCustomer
                    :mode="mode"
                    :id="user.type_id"
                    @ok="handleCustomerOk"
                    @modeChange="handleModeChane"
                    @cancel="handleClose"
                  />
                </template>
                <!-- <template v-else-if="accountType === '2'">
                  <Carrier :mode="mode" :id="user.type_id" @ok="handleCarrierOk" @modeChange="handleModeChane"
                    @cancel="handleClose" />
                </template> -->
                <template v-else-if="accountType === '3'">
                  <Staff
                    :mode="mode"
                    :id="user.type_id"
                    @modeChange="handleModeChane"
                    @cancel="handleClose"
                  />
                </template>
              </div>
            </el-col>
            <el-col :span="12">
              <div
                class="up-content"
                v-if="Object.keys(contents || []).length > 0"
              >
                <el-card shadow="hover" class="content-card">
                  <div
                    class="part"
                    v-for="(item, index) in contents"
                    :key="index"
                  >
                    <h3>{{ item.title }}</h3>
                    <el-card
                      shadow="hover"
                      @click.native="handleUpClick(iten.type)"
                      class="btn"
                      :class="{ respect: iten.disable }"
                      v-for="(iten, indey) in item.btns"
                      :key="indey"
                      :data-tracker="iten.type == '1' ? 'P65-3' : 'P65-4'"
                    >
                      <p>{{ iten.text }}</p>
                      <div class="item-discribtion">
                        <span>{{ iten.tip }}</span>
                        <span class="dis-right">{{
                          iten.disable ? "敬请期待" : ""
                        }}</span>
                      </div>
                    </el-card>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="安全设置" name="1">
          <div class="safe-set">
            <div class="set-item">
              <div class="title">登录密码</div>
              <div class="con">
                <div class="con-text">
                  <span>已设置</span>
                  <span
                    data-tracker="P65-2"
                    class="update"
                    @click="handlePassUpdate"
                    >修改</span
                  >
                </div>
                <el-divider></el-divider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog
      title=""
      append-to-body
      :key="Math.random()"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
    >
      <CompanyCustomer
        v-if="selectType === '1'"
        mode="add"
        :id="user.type_id"
        @ok="handleCustomerOk"
        @cancel="handleClose"
      />
      <Carrier
        v-else-if="selectType === '2'"
        mode="add"
        :id="user.type_id"
        :user="user"
        @ok="handleCarrierOk"
        @cancel="handleClose"
      />
    </el-dialog>
    <PasswordChange
      :visible="passwordFormVisible"
      @close="handlePassClose"
      :mobile="user.mobile"
    ></PasswordChange>
    <RoleChange
      :dialogVisible="roleFormVisible"
      :user="user"
      @close="handleRoleClose"
    ></RoleChange>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { uploading } from "../material/common/common";
import {
  INfOuserList,
  amendAvatar,
  amendUserInfo,
  AllInfo,
  ModifyPassword,
} from "@/api/user";
import defaultAvatar from "@/assets/img/defaultAvatar.png";

import { mobileCount } from "@/api/organization";
import PersonCustomer from "./components/personCustomer.vue";

import CompanyCustomer from "./components/companyCustomer.vue";
import PasswordChange from "./components/passwordChange.vue";
import RoleChange from "./components/roleChange.vue";
import Staff from "./components/staff.vue";

import Carrier from "./components/carrier";
export default {
  name: "userCenter", // 个人中心页面
  components: {
    PersonCustomer,
    CompanyCustomer,
    Carrier,
    PasswordChange,
    RoleChange,
    Staff,
  },
  props: [],
  data() {
    return {
      user: null,
      fileList: [],
      mode: "detail",
      defaultAvatar: defaultAvatar,
      activeName: "0",
      dialogVisible: false,
      contents: [],
      companyCust: {
        title: "升级为公司客户",
        btns: [
          {
            type: "1",
            text: "我是公司客户",
            tip: "我以公司名义下单",
          },
        ],
      },
      carrierCust: {
        title: "升级为承运商",
        btns: [
          {
            type: "2",
            text: "我要使用渡盟运输管理系统",
            tip: "我要承运物流运单",
          },
          {
            type: "3",
            text: "我要成为渡石承运商",
            tip: "我有承运资质，我想承接渡石的运单",
            disable: true,
          },
        ],
      },
      carrierCust2: {
        title: "升级为渡石承运商",
        btns: [
          {
            type: "4",
            text: "我要成为渡石承运商",
            tip: "我有承运资质，我想承接渡石的运单",
            disable: true,
          },
        ],
      },
      accountType: "",
      typesData: ["个人客户", "公司客户", "承运商"],
      selectType: "",
      passwordFormVisible: false,
      roleFormVisible: false,
    };
  },
  computed: {
    isDS() {
      return this.user.saas_company_id === 1;
    },
  },
  mounted() {
    INfOuserList({ token: getToken("Token") }).then((res) => {
      this.user = res.data;
      // type   身份类型：0员工1客户,2司机,3承运商，4系统对接
      // customer_type  0 公司客户 2个人客户
      const { type, customer_type } = this.user;
      if (type === 1 && customer_type === 2) {
        // 个人客户
        this.accountType = "0";
      } else if (type === 1 && customer_type === 0) {
        // 公司客户
        this.accountType = "1";
      } else if (type === 3) {
        // 承运商
        this.accountType = "2";
      } else if (type === 0) {
        // 员工
        this.accountType = "3";
      }

      if (this.accountType === "0") {
        this.contents = [this.companyCust, this.carrierCust];
      } else if (this.accountType === "1") {
        this.contents = [this.carrierCust];
      } else if (this.accountType === "2") {
        this.contents = [this.carrierCust2];
      } else if (this.accountType === "3") {
        //员工
        if (this.isDS) {
          // 渡石
          this.contents = [];
        } else {
          this.contents = [this.carrierCust2];
        }
      } else {
        this.contents = [];
      }
    });
  },
  methods: {
    handleClick() {},
    handleModeChane(mode) {
      this.mode = mode;
    },
    handlePassUpdate() {
      this.passwordFormVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handlePassClose() {
      this.passwordFormVisible = false;
    },
    handleRoleClose() {
      this.roleFormVisible = false;
      location.reload();
    },
    handleCustomerOk() {
      this.dialogVisible = false;
      location.reload();
    },
    handleCarrierOk() {
      this.dialogVisible = false;
      this.roleFormVisible = true;
    },
    checkMobile(rule, val, cb) {
      mobileCount({ mobile: val, user_id: this.user.user_id }).then((res) => {
        if (res.data.count > 0) {
          cb(new Error("手机号已绑定"));
        } else {
          cb();
        }
      });
    },
    async handleChange(file, fileList) {
      var fileData = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      this.$confirm(`确定要修改头像吗？`).then(async (res) => {
        if (res) {
          const { res: result } = await uploading(fileData, filename, 12);
          this.user.profile_photo = result.requestUrls[0];
          const res1 = await amendAvatar({
            profile_photo_url: this.user.profile_photo,
          });
          if (res1.code === 10000) {
            this.$message({
              type: "success",
              message: "修改头像成功!",
            });
            // this.$router.go(0);
          }
        }
      });
    },
    handleSubmit() {
      this.$refs["user"].validate((valid) => {
        if (!valid) return;
        amendUserInfo({
          nickname: this.user.nickname,
          mobile: this.user.mobile,
        }).then((res) => {
          if (res.code === 10000) {
            this.$message({
              type: "success",
              message: "修改信息成功!",
            });
          }
        });
      });
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleUpClick(type) {
      // if (type === '1') {
      //   this.dialogVisible = true;
      // } else if (type === '2') {
      // }
      this.selectType = type;
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  // background: #fff;
  padding: 10px;

  .info-wrap {
    padding: 20px;
  }

  .manage-wrap {
    margin-top: 10px;

    .account {
      // padding: 20px;
      font-size: 16px;
    }

    .up-content {
      display: flex;
      width: 100%;
      justify-content: center;

      .content-card {
        width: 420px;
        border-radius: 10px;
        // box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(187, 187, 187, 1);

        /deep/.el-card__body,
        .el-main {
          padding: 20px 28px;
        }

        .part {
          margin-bottom: 20px;

          h3 {
            color: rgba(78, 89, 105, 1);
            font-size: 28px;
            line-height: 42px;
            font-weight: bold;
          }

          .btn {
            margin-top: 10px;
            border-radius: 5px;
            padding-left: 5px;
            text-align: left;
            cursor: pointer;
            box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(187, 187, 187, 1);
            &.respect {
              background-color: rgba(239, 239, 239, 1);
              pointer-events: none;
            }
            /deep/.el-card__body,
            .el-main {
              padding: 16px;
            }

            p {
              color: rgba(78, 89, 105, 1);
              font-size: 14px;
              line-height: 26px;
            }

            span {
              color: rgba(154, 154, 154, 1);
              font-size: 14px;
            }
            .item-discribtion {
              display: flex;
              justify-content: space-between;
              .dis-right {
                color: rgba(22, 93, 255, 1);
              }
            }
          }
        }
      }
    }

    .safe-set {
      padding: 20px;

      .set-item {
        display: flex;

        .title {
          width: 100px;
        }

        .con {
          width: 600px;

          .con-text {
            display: flex;
            justify-content: space-between;

            .update {
              color: #165dff;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .form {
    width: 60%;

    .el-input {
      width: 200px;
    }
  }
}
</style>
